<script>
import {updateEmail, userDetail} from "../../../api/user";
import {ElMessage} from "element-plus";
import {sendEmailCaptcha} from "../../../api/auth";
import {getItem, setItem} from "../../../utils/webutil";

export default {
    name: "UpdateEmail",
    data() {
        return {
            editBox: new Map(),
            user: {},
            file: null,
            rePassword:'',
            codeTime:'',
            tip:'发送验证码'
        }
    },

    methods: {
        showEdit(key) {
            var old = this.editBox.get(key);
            this.editBox.set(key, !old)
        },
        getUser() {
            if (!this.$store.state.user) {
                const id = this.$store.state.userInfo.userId
                userDetail(id)
                    .then(res => {
                        if (res.code === 200) {
                            this.$store.commit('setUser', res.data)
                            this.user = res.data
                        }
                    })
            } else this.user = this.$store.state.user
        },
        back() {
            this.$router.back()
        },
        sendEmail(){
            if (!this.user.newEmail){
                ElMessage.error("请输入邮箱")
                return
            }
            const that=this
            this.codeTime=30
            setItem('time',30)
            this.tip='验证码已发送'
            const temp=setInterval(()=>{
                that.codeTime--;
                if(that.codeTime===0){
                    that.codeTime=''
                    clearInterval(temp)
                    that.tip="发送验证码"
                    localStorage.removeItem('time')
                }
            },1000)
            sendEmailCaptcha(this.user.email)
        },
        updateEmail(){
            updateEmail(this.user)
            .then(res=>{
                if(res.code===200)
                    ElMessage.success("修改成功")
                else ElMessage.error("修改失败")
            })
        }
    },
    created() {
        this.getUser()
        const tmp=getItem('time')
        if (tmp!==null){
            this.codeTime=tmp
            const that=this
            const temp=setInterval(()=>{
                that.codeTime--;
                if(that.codeTime===0){
                    that.codeTime=''
                    clearInterval(temp)
                    that.tip="发送验证码"
                    localStorage.removeItem('time')
                }
            },1000)
        }
    }
}
</script>

<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div style="width: 100%">
                <h2>修改邮箱</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex row align-center" style="width: 100%;cursor: pointer;margin:0 0 1em 0" @click="back">
                <i class="iconfont icon-back" style="font-size: 17pt"></i>
                <span>返回上一层</span>
            </div>
            <div class="" style="padding:1em;margin:2em 0;border: 1px #e8acac solid;width: 300px">
                <span>
                    点击下面的<span style="color: #00a1ba">发送验证码</span>。系统将会给你以前的邮箱发送一个验证码
                    <br>
                    你的邮箱是{{user.email}}
                </span>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <el-input v-model="user.newEmail" placeholder="新邮箱" style="width: 300px"></el-input>
            </div>
            <div class="flex row  space-between" style="margin-bottom: 1em;width: 300px">
                <el-input v-model="user.verifyCode" placeholder="验证码" style="width: 150px"/>
                <el-button @click="sendEmail" :disabled="codeTime!==''" >{{ tip }}{{codeTime}}</el-button>
            </div>
            <div class="flex flex-end" style="width: 300px;margin-top: 1rem">
                <el-button style="width: 100%" @click="updateEmail">提交修改</el-button>
            </div>


        </div>
    </div>
</template>

<style lang="scss" scoped>
.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}
</style>
